import React from 'react';
// 头部组件
// src/shared/header/index.tsx
import styles from "@styles/header.module.scss";
import { LeftOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";

interface Props {
    // 页面标题
    title?: string;
    // 头部右侧链接
    link?: string;
    // 头部右侧链接的点击事件的处理函数
    linkHandler?: () => void;
    // 返回按钮的点击事件处理函数
    backHandler?: () => void;
}

export default function Header({
                                   title,
                                   link,
                                   linkHandler,
                                   backHandler,
                               }: Props) {
    // 用于跳转页面的方法
    const navigate = useNavigate();
    // 返回上一页
    const toBack = () => navigate(-1);
    // 渲染视图
    return (
        <div className={styles.container}>
            <LeftOutline onClick={backHandler ? backHandler : toBack} />
            <div className={styles.title}>{title}</div>
            <div className={styles.link} onClick={linkHandler}>{link}</div>
            <div className={styles.third}></div>
        </div>
    );
}